<!-- 首页头部 -->
<template>
    <div class="box">
        <div class="header">
            <span class="title"><img src="@/assets/log.png"> 链客云</span>

            <span class="right">
        <div class="searchIcon" @click="showSearch"><el-icon><Search/></el-icon></div>
        <div class="searchText" v-show="searchShow">
          <el-input placeholder="搜索菜单" @click="showMenu"></el-input>
          <div v-show="menuShow" class="menu" @mouseleave="closeMenu">
           <ul class="menudetail">
             <li>首页</li>
              <li>首页</li>
              <li>首页</li>
              <li>首页</li>
              <li>首页</li>
              <li>首页</li>
             <li>首页</li>
              <li>首页</li>
              <li>首页</li>
              <li>首页</li>
              <li>首页</li>
              <li>首页</li>
           </ul>
          </div>
        </div>
        <div class="user" @mouseenter="showSetting" @mouseleave="closeSetting"><img src="@/assets/log.png"
                                                                                    style="margin-right: 10px">欢迎您,{{
                account
            }}
          <div>
            <ul class="userdetail" v-show="settingShow">
              <li><el-icon><Avatar/></el-icon>&nbsp;&nbsp;切换部门</li>
              <li><el-icon><Setting/></el-icon>&nbsp;&nbsp;密码修改</li>
              <li><el-icon><Odometer/></el-icon>&nbsp;&nbsp;系统设置</li>
              <li @click="logout"><el-icon><SwitchButton/></el-icon>&nbsp;&nbsp;退出登录</li>
           </ul>
          </div>
        </div>
        <span class="month">当前月度2025-4-16</span>
      </span>

        </div>
    </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import request from '@/util/request'
import {ref, reactive} from "vue";
import {ElMessage} from "element-plus";

const router = useRouter()
// 从 sessionStorage 获取用户信息
const userInfo = sessionStorage.getItem('user');
const user = userInfo ? JSON.parse(userInfo) : null;
const account = ref(user ? user.user.name : ''); // 响应式用户名

let searchShow = ref(false)
const showSearch = () => {
    searchShow.value = true
}

let menuShow = ref(false)
const showMenu = () => {
    menuShow.value = true
}


const closeMenu = () => {
    menuShow.value = false
}
let settingShow = ref(false)

const showSetting = () => {
    settingShow.value = true
}

const closeSetting = () => {
    settingShow.value = false
}


//退出登录
const logout = () => {
    console.log(user)
    if (!userInfo) {
        ElMessage.error("用户未登录");
        router.push("/login")
        return;
    }
    console.log(user.user.account)
    const sessionId = user.user.account;
    request.post('/per/user/logout', {sessionId}).then(res => {
        if (res.data.code === '200') {
            ElMessage({
                type: "success",
                message: '退出登录成功'
            })
            router.push("/login")
            sessionStorage.removeItem("user");
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("refreshToken");
            sessionStorage.removeItem("permissions");
        } else {
            ElMessage.error("退出登录失败，会话不存在")
        }
    }).catch(error => {
        ElMessage.error("退出功能出错，请联系管理员")
    })
}
</script>

<style scoped>

.title {
    font-weight: 600;
    font-size: 18px;
}

.menu {
    z-index: 1000;
    position: absolute;
    color: black;
    width: 100%;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.header {
    border: 1px solid black;
    background-color: #1890ff;
    height: 59px;
    color: white;
}

.menudetail {
    padding-top: 15px;
    color: rgba(0, 0, 0, .65);
    line-height: 1.5;
    height: 200px;
    background-color: white;
    overflow: auto;
}

.menudetail li {
    padding: 5px 12px;
    font-weight: 400;
    white-space: nowrap;
    line-height: 22px;
}

.menudetail li:hover {
    background-color: #e6f7ff;
}

img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.box {
    width: 100%;
}

.right {
    float: right;
    margin-right: 20px;
}

.searchText {
    position: relative;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.searchText {
    display: inline-block;
    line-height: 59px;
    width: 180px;
    height: 59px;
}

.user {
    width: 180px;
    height: 59px;
    position: relative;
    text-align: center;
}

.user:hover {
    background: hsla(0, 0%, 100%, .3);
}

.userdetail {
    background-color: white;
    z-index: 1000;
    padding-top: 5px;
    position: absolute;
    color: rgba(0, 0, 0, .65);
    width: 100%;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}


.userdetail li {
    text-align: left;
    padding: 5px 12px;
    font-weight: 400;
    white-space: nowrap;
    line-height: 22px;
}

.userdetail li:hover {
    background-color: #e6f7ff;
}

.searchIcon {
    margin-right: 10px;
    width: 59px;
    height: 59px;
    display: inline-block;
    line-height: 59px;
    text-align: center;
}

.searchIcon:hover {
    background: hsla(0, 0%, 100%, .3);
}

.title, .user, .month {
    display: inline-block;
    line-height: 59px;
    margin: 0 20px;
}
</style>
